<template>
	<div>
		<!-- <van-button type="primary" @click="show=true">点击</van-button> -->
		<!-- 点击展示规格 show为true就展示，为false就不展示 -->
		<div class="goback absolute z1 t10 l10" @click="goback">
			<van-icon name="arrow-left" color="#fff" size="15"/>
		</div>
		<van-swipe :autoplay="3000" indicator-color="white">
			<van-swipe-item v-for="(item,index) in detail.banner" :key=index>
				<img width="100%" :src="item" />
			</van-swipe-item>
		</van-swipe>
		<!-- 商品信息 -->
		<div class="p15">
			<p class="price color-main fw600 fs26">
				<span class="fs14 vt">￥</span>
				{{detail.price}}
			</p>
			<p class="fw600 fs18 mt5">{{detail.title}}</p>
		</div>
		<!-- 横向滚动 -->
		<div class="horizontal-container">
			<div class="scroll-wrapper" ref="scroll">
				<div class="scroll-content">
					<div class="scroll-item" v-for="(item, index) in scrollList" :key="index">
						<img width="16px" :src="item.img" />
						<p class="fs13">{{item.text}}</p>
						<p class="fs12 over-1">{{item.desc}}</p>
					</div>
				</div>
			</div>
		</div>
		<!-- sku规格信息 -->
		<div class="sku">
			<van-cell @click="show=true" title="单元格" is-link value="内容" />
		</div>
		
		<!-- sku规格信息 -->
		<van-sku
		v-model="show"
		:sku="sku"
		:goods="goods"
		:goods-id="$route.query.id"
		:hide-stock="sku.hide_stock"
		@buy-clicked="onBuyClicked"
		@add-cart="onAddCartClicked"
		ref="sku"
		/>
	</div>
</template>

<script>
	import axios from 'axios'
	import BScroll from '@better-scroll/core'
	export default{
		data(){
			return{
				show:false,
				sku:{},
				goods:{
					// 默认商品 sku 缩略图
					picture: ''
				},
				detail:{},
				bs:null,
				scrollList:[
					{
						img:require('./../assets/scroll-img-1.png'),
						text:'GPU',
						desc:'骁龙8 Gen 1'
					},
					{
						img:require('./../assets/scroll-img-2.png'),
						text:'三摄像头',
						desc:'6400万像素+3个摄像头'
					},
					{
						img:require('./../assets/scroll-img-1.png'),
						text:'GPU',
						desc:'骁龙8 Gen 1'
					},
					{
						img:require('./../assets/scroll-img-2.png'),
						text:'三摄像头',
						desc:'6400万像素+3个摄像头'
					},
					{
						img:require('./../assets/scroll-img-1.png'),
						text:'GPU',
						desc:'骁龙8 Gen 1'
					},
					{
						img:require('./../assets/scroll-img-2.png'),
						text:'三摄像头',
						desc:'6400万像素+3个摄像头'
					},
					{
						img:require('./../assets/scroll-img-1.png'),
						text:'GPU',
						desc:'骁龙8 Gen 1'
					},
					{
						img:require('./../assets/scroll-img-2.png'),
						text:'三摄像头',
						desc:'6400万像素+3个摄像头'
					},
					{
						img:require('./../assets/scroll-img-1.png'),
						text:'GPU',
						desc:'骁龙8 Gen 1'
					},
					{
						img:require('./../assets/scroll-img-2.png'),
						text:'三摄像头',
						desc:'6400万像素+3个摄像头'
					}
				]
			}
		},
		methods:{
			goback(){
				this.$router.back()//返回上一页
			},
			onBuyClicked(){
				console.log("购买")
				console.log(this.$refs.sku.getSkuData())
			},
			onAddCartClicked(){
				console.log("加入购物车")
			},
			//getData用来请求商品详情
			getData(){
				axios.get('/api/detail?id='+this.$route.query.id).then(data=>{
					// console.log(data.data.data.banner)
					this.detail=data.data.data
					this.goods.picture=this.detail.main_banner
					this.$set(this.sku,'tree',this.detail.sku.tree)
					this.$set(this.sku,'list',this.detail.sku.list)
					this.$set(this.sku,'price',this.detail.price)
					this.$set(this.sku,'stock_num',200)
				})
			},
			init() {
				this.bs = new BScroll(this.$refs.scroll, {
					scrollX: true,
					probeType: 3 // listening scroll event
				})
			}
		},
		watch:{
			show(newVal){
				if(newVal==false){
					let data=this.$refs.sku.getSkuData().selectedSkuComb//选中的规格
					// let num=this.$refs.sku.getSkuData().selectedNum//选中的数量
					
					//遍历规格的数据
					this.sku.tree.forEach(item=>{
						console.log(item.k_s)//找到规格中的属性
						console.log(data[item.k_s])//找到选中的规格的id数据
						//要用这个数据和tree里面的v中的id进行比较 一致就拿到name值
						item.v.forEach(elem=>{
							if(data[item.k_s]===elem.id){
								console.log(elem.name)
							}
						})
					})
					
				}
				//获取规格数据
			}
		},
		mounted(){
			//获取？传过来的数据query
			// console.log(this.$route.query.id)
			this.getData()
			this.init()
		},
		beforeDestroy(){
			this.bs.destroy()
		}
	}
</script>

<style>
	.sku .van-cell__value{
		flex: 4;
		text-align: left;
	}
</style>
<style scoped>
	.goback{
		background: rgba(0,0,0,0.3);
		border-radius: 50%;
		width: 28px;
		height: 28px;
		text-align: center;
		line-height: 28px;
	}
	.horizontal-container .scroll-wrapper{
		position:relative;
		white-space:nowrap;
		border-top:1px solid rgba(0,0,0,0.05);
		overflow:hidden;
	}
	.scroll-content{
		display:inline-block;
	}
	.scroll-item{
		display :inline-block;
		text-align :center;
		padding: 20px 5px;
		width: 82px;
	}  
</style>



 
 